<template>
  <div class="per-home">
    <div class="header">
      <el-button type="primary" size="small" @click="handleExitClick">退出登陆</el-button>
      <el-button type="success" size="small" @click="handleRetureClick">返回前台</el-button>
    </div>
    <div class="container">
      <div class="aside">
        <AsideMenu></AsideMenu>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router"
import AsideMenu from "./cpns/aside-menu.vue"
// 页面数据
const router = useRouter()
// 事件处理
const handleExitClick = () => {
  const flag = confirm("确定要退出登陆吗?")
  if (flag) {
    localStorage.removeItem('token')
    router.replace({ path: '/' })
  }
}

const handleRetureClick = () => {
  router.push({ path: '/' })
}
</script>

<style scoped>
@media screen and (max-width: 720px) {
  .content {
    display: none;
  }
}

.per-home {
  padding-top: 45px;
  padding-left: 200px;
}

.header {
  position: fixed;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  height: 45px;
  top: 0;
  left: 0;
  right: 0;
  background-color: #663366;
  padding: 0 30px;
  z-index: 1000;
}

.header .el-button {
  margin: 0 10px;
}

.container {
  display: flex;
}

.aside {
  width: 200px;
  background-color: #fff;
  position: fixed;
  top: 45px;
  left: 0;
  bottom: 0;
}

.content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
</style>
